<template>
	<view class="padd">
		<view class="recItem">
			<view class="itemTit">
				<view class="lineView"></view>
				<view>学习明细</view>
			</view>
			<view class="itemCon">
				<view class="conItem">
					<view class="currSta" :class="classesZdxzd(recDet)"></view>
					<view>针对性诊断：{{recDet.step1}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesGlzd(recDet)"></view>
					<view>关联性诊断：{{recDet.step2}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesGlZsd(recDet)"></view>
					<view>关联知识点诊断：{{recDet.step3}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesBzsd(recDet)"></view>
					<view>本知识点学习：{{recDet.step4}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesZczd(recDet)"></view>
					<view>再次诊断：{{recDet.step5}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesWcqk(recDet)"></view>
					<view>完成情况：{{recDet.stepCom}}</view>
				</view>
				<view class="conItem">
					<view class="currSta" :class="classesScore(recDet)"></view>
					<view>成绩：{{recDet.finalScore == '' ? '暂无' : recDet.finalScore }}</view>
				</view>
			</view>
		</view>
		<view class="btnWrap margT">
			<template v-if="currRole == 'stu'">
				<template v-if="recDet.stepCom == '完成'">
					<button class="comBtn spec" @tap="viewScore">查看答卷</button>
				</template>
				<template v-else>
					<button class="comBtn" @tap="goStudy">继续学习</button>
					<button class="comBtn" @tap="viewScore">查看答卷</button>
				</template>
			</template>
			<template v-else>
				<button class="comBtn spec" @tap="viewScore">查看答卷</button>
			</template>
		</view>
		<view class="recItem">
			<view class="itemTit">
				<view class="lineView"></view>
				<view>系统评价</view>
			</view>
			<view class="itemCon">
				<template v-if="recDet.sysAssess == '暂无系统评价'">
					<view class="noDataRec">
						<image class="noRecImg" mode="widthFix" src="../../../static/images/zhuxue/noSys.png"></image>
					</view>
				</template>
				<template v-else>
					<view class="detCon">{{recDet.sysAssess}}</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import { getStudyLogResult } from '@/api/zhuxue'
	export default {
		data() {
			return {
				studyLogId:0,
				loreName:'',
				recDet:{},
				stuName:''
			}
		},
		computed:{
			classesScore(){
				return function(recDet){
					return{
						'comp' : recDet.finalScore != '暂无',
						'noComp' : recDet.finalScore == '暂无'
					}
				}
			},
			classesWcqk(){
				return function(recDet){
					return{
						'comp' : recDet.stepCom == '完成',
						'noComp' : recDet.stepCom == '未完成'
					}
				}
			},
			classesZczd(){
				return function(recDet){
					return{
						'comp' : recDet.step5 == '通过',
						'noComp' : recDet.step5 == '未诊断' || recDet.step5 == '诊断未通过'
					}
				}
			},
			classesBzsd(){
				return function(recDet){
					return{
						'comp' : recDet.step4 == '完成',
						'noComp' : recDet.step4 == '未学习' || recDet.step4 == '学习未完成'
					}
				}
			},
			classesGlZsd(){
				return function(recDet){
					return{
						'comp' : recDet.step3 == '完成' || recDet.step3 == '学习已完成',
						'noComp' : recDet.step3 == '未学习' || recDet.step3 == '学习未完成'
					}
				}
			},
			classesGlzd(){
				return function(recDet){
					return{
						'comp' : recDet.step2 == '通过' ||　recDet.step2 == '诊断已完成',
						'noComp' : recDet.step2 == '诊断未完成' || recDet.step2 == '未诊断'
					}
				}
			},
			classesZdxzd(){
				return function(recDet){
					return{
						'comp' : recDet.step1 == '通过',
						'noComp' : recDet.step1 == '未通过'
					}
				}
			}
		},
		onLoad(options){
			let title = '';
			this.studyLogId = options.studyLogId;
			this.loreName = options.loreName;
			this.currRole = options.currRole;
			if(this.currRole != 'stu'){
				this.stuName = options.stuName;
				title = `【${this.stuName}】-【${ options.loreName}】学习详情`;
			}else{
				title = options.loreName + '学习详情';
			}
			setTimeout(()=>{
				uni.setNavigationBarTitle({
					title
				})
			},100)
			this.loadStudyLogResult();
		},
		methods: {
			viewScore(){
				uni.navigateTo({
					url:'/pages/subIndex/viewAnswer/viewAnswer?studyLogId=' + this.recDet.studyLogId + '&loreId=' + this.recDet.loreId + '&loreName=' + this.loreName + '&currRole=' + this.currRole + '&stuName=' + this.stuName
				})
			},
			loadStudyLogResult(){
				var field = { studyLogId:this.studyLogId };
				let contentStr = this.crypto.encrypt(JSON.stringify( field )); 
				getStudyLogResult({content:contentStr}).then(res=>{
					this.recDet = res.data.datas;
				}).catch(err=>{
					console.log(err)
				});
			},
			goStudy(){
				uni.navigateTo({
					url:'/pages/subIndex/studyMap/studyMap?studyLogId=' + this.recDet.studyLogId + '&loreId=' + this.recDet.loreId
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: $pss-bg-primary;
	}
</style>
<style lang="scss" scoped>
	.detCon{
		color: $pss-text-color3;
		padding: 20rpx;
		@include respTo(phone){
			font-size: $font-size30;
			line-height: 46rpx;
		}
		@include respTo(pad){
			font-size:$padSize16;
			line-height: 36rpx;
		}
	}
	.btnWrap{
		display: flex;
		justify-content: space-between;
		.comBtn{
			width: 46%;
			opacity: .8;
			@include respTo(phone){
				height: 80rpx;
				line-height: 80rpx;
				font-size: $font-size30;
			}
			@include respTo(pad){
				height: 60rpx;
				line-height: 60rpx;
				font-size: $padSize20;
			}
			&.spec{
				width: 100%;
			}
		}
	}
	.recItem{
		background: #fff;
		border-radius: 15rpx;
		box-shadow: 0 0 10rpx #eee;
		padding: 0 20rpx;
		@include respTo(phone){
			margin-top: 30rpx;
		}
		@include respTo(pad){
			margin-top: 20rpx;
		}
		.noDataRec{
			text-align: center;
			padding: 50rpx 0;
			.noRecImg{
				width: 280rpx;
			}
		}
		.conItem{
			display: flex;
			align-items: center;
			color: $pss-text-color3;
			@include respTo(phone){
				font-size: $font-size32;
				height: 80rpx;
			}
			@include respTo(pad){
				font-size:$padSize16;
				height: 46rpx;
			}
			.currSta{
				@include respTo(phone){
					width: 26rpx;
					height: 26rpx;
				}
				@include respTo(pad){
					width: 16rpx;
					height: 16rpx;
				}
				margin-right: 10rpx;
				opacity: .8;
				border-radius: 5rpx;
				&.comp{
					background: $pss-color-green;
				}
				&.noComp{
					background:$pss-color-red;
				}
			}
		}
		.itemTit{
			border-bottom: 1rpx solid #eee;
			color: $pss-text-color3;
			font-weight: bold;
			display: flex;
			align-items: center;
			@include respTo(phone){
				font-size: $font-size32;
				height: 90rpx;
			}
			@include respTo(pad){
				font-size:$padSize20;
				height: 60rpx;
			}
			.lineView{
				background: $pss-color-primary_1;
				border-radius: 20rpx;
				margin-right: 10rpx;
				@include respTo(phone){
					width: 10rpx;
					height: 28rpx
				}
				@include respTo(pad){
					width: 6rpx;
					height: 20rpx
				}
				// background-image: linear-gradient(315deg,#6772FF 0,#00F9E5 100%);
			}
		}
	}
</style>
